<template>
  <div>
    <van-nav-bar
      title="收件地址"
      left-text="返回"
      left-arrow
      @click-left="back">
      <template #left>
        <van-icon name="arrow-left" size="20"/>
      </template>
    </van-nav-bar>

    <div class="van-address-list ">
      <van-radio-group v-model="addressCheck" >
        <div class="van-card" v-for="(item,index) in list" :key="index">
          <div class="address-item " >
            <div>
              <div class="tag-first-name">
                <span >{{item.name.slice(0,1)}}</span>
              </div>
            </div>
            <div class="user-info">
              <span>
               {{item.name}}  <span class="user-tel">{{item.tel}}</span>
             </span>
              <p class="user-adress">
                <van-tag color="#E65D6E" round plain v-if="item.isDefault">默认</van-tag>
                {{item.addressDetail}}
              </p>
            </div>
            <van-icon class="address-edit"  name="edit" size="20" @click="onEdit(item)"/>
          </div>
          <van-divider/>

          <div class="address-check">
            <van-radio :name="item.id" icon-size="18px" checked-color="#E65D6E" @click="changeDefualt(item,index)">默认地址</van-radio>
            <span @click="deleteAdress(item,index)">删除</span>
          </div>
        </div>

      </van-radio-group>

      <div class="van-address-list__bottom">
        <van-button size="small" color="linear-gradient(to right, #ff6034, #ee0a24)" block round
                    @click="onAdd">
          新增地址
        </van-button>
      </div>
    </div>

  </div>
</template>

<script>

import {addressList} from '@/api/user'
import {addressDelete, addressSave} from '../../../api/user'
import {Dialog, Toast} from 'vant'

export default {
  name: 'index',
  created () {
    this.initData()
  },
  methods: {
    initData () {
      addressList().then(res => {
        let data = res.data.data
        this.list = data.list
        let checkIndex
        this.list.forEach((item, index) => {
          if (item.isDefault) {
            checkIndex = index
            this.addressCheck = item.id
          }
        })
        this.list.splice(checkIndex, 1, ...this.list.splice(0, 1, this.list[checkIndex]))
        console.log(this.list)
      })
    },
    back () {
      this.$router.back()
    },
    onAdd () {
      this.$router.push({name: 'editAddress'})
    },
    onEdit (item) {
      this.$router.push({name: 'editAddress', params: {id: item.id}})
    },
    changeDefualt (item, index) {
      item.isDefault = true
      addressSave(item).then(res => {
        this.list.forEach((item, itemIndex) => {
          if (itemIndex !== index) {
            item.isDefault = false
          } else {
            item.isDefault = true
          }
        })
        this.list.splice(index, 1, ...this.list.splice(0, 1, this.list[index]))
      })
    },
    deleteAdress (item, index) {
      Dialog.confirm({
        message: '确定删除该地址吗?',
        theme: 'round-button'
      }).then(() => {
        addressDelete({id: item.id}).then(res => {
          this.list.splice(index, 1)
        })
      }).catch(() => {
      })
    }
  },
  data () {
    return {
      addressCheck: '',
      list: []
    }
  }

}
</script>

<style scoped>
.address-edit{
  flex: 1;
  text-align: right;
}
.address-check{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.user-info{
  margin-left: 10px;
  font-size: 14px;
}
.user-tel{
  color: #c5c5c5;
}
.user-adress{
  margin-top: 10px;
  font-size: 12px;
}
.tag-first-name{

  color: white;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  height: 30px;
  width: 30px;
  background-color: rgba(230,93,110,0.5);
  border-radius: 80px;
}
.address-item{
  display: flex;
  flex-direction: row;
  align-items: center;
}
</style>
